<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<!-- 网页标题 -->
		<title>垃圾分类管理系统</title>
		<!-- 外部CSS以及JavaScript引用 -->
		<!-- CSS外部引用 -->
<!--		<link rel="stylesheet" href="./CSS/index_css.css" />-->
		<link rel="stylesheet" href="./CSS/index_values_css.css" />
		<link rel="stylesheet" href="./CSS/reset.css" />
		<!-- JS外部引用 -->
		<script src="./JS/index_container.js"></script>
		<script src="JS/index_newsDiv.js"></script>
	</head>
	<body style=" background-color: rgba(128, 255, 128, 0.5);">
		<div class="bg-gradient">
			<div class="content">
				<!-- 顶部块区 -->
				<div class="topDiv">
					<span class="logo">
						<img src="./img/01.png" alt="" srcset="" />
					</span>
					<!-- 登录按钮 -->
					<span class="login">
						<button>
							<a href="./subtab/login.html" target="_blank" style="color: white;">登录</a>
						</button>
					</span>
					<!-- 注册按钮 -->
					<span class="register">
						<button>
							<a href="./subtab/register.html" target="_blank" style="color: white;">注册</a>
						</button>
					</span>
				</div>
				<!-- 网站标题区块 -->
				<div class="titleDiv">
					<h1>垃圾分类管理系统</h1>
				</div>
				<!-- 二级块区 -->
				<div class="twoiceDiv">
					<!-- 主题轮播图块区 -->
					<span id="subject_span">
						<div id="banner-img-container">
							<img src="./img/img%20(1).png" alt="">
							<img src="./img/img%20(2).png" alt="">
							<img src="./img/img%20(3).png" alt="">
							<img src="./img/img%20(4).png" alt="">
							<img src="./img/img%20(2).png" alt="">
						</div>
						<!-- 轮播图片 -->
						<input type="radio" name="radio-set" checked="checked" id="banner-control-1">
						<a class="banner-nav-a" href="#banner01"></a>
						<input type="radio" name="radio-set" id="banner-control-2">
						<a class="banner-nav-a" href="#banner02"></a>
						<input type="radio" name="radio-set" id="banner-control-3">
						<a class="banner-nav-a" href="#banner03"></a>
						<input type="radio" name="radio-set" id="banner-control-4">
						<a class="banner-nav-a" href="#banner04"></a>
						<input type="radio" name="radio-set" id="banner-control-5">
						<a class="banner-nav-a" href="#banner05"></a>
					</span>
					<!-- 主页导航栏 -->
					<span class="nav_span">
						<nav>
							<ul>
								<li>
									<a href="./subtab/WebsiteManagementInterface.html" target="_blank">管理界面</a>
								</li>
								<li>
									<a href="./subtab/DataViewingInterface.html" target="_blank">数据查看界面</a>
								</li>
								<li>
									<a href="./subtab/GarbageClassificationSciencePage.html" target="_blank">垃圾分类科普</a>
								</li>
								<li>
									<a href="./subtab/userWork.html">用户操作界面</a>
								</li>
							</ul>
						</nav>
					</span>
				</div>
				<!-- 三级块区 -->
				<div class="threethDiv">
					<!-- 数据更改动作弹窗区块 -->
					<span id="container"></span>
					<span>
						<div class="music-player">
							<h2>每日音乐播放器</h2>
							<ul class="playlist">
								<li onclick="playMusic('song1.mp3')">歌曲 1</li>
								<li onclick="playMusic('song2.mp3')">歌曲 2</li>
								<li onclick="playMusic('song3.mp3')">歌曲 3</li>
								<!-- 更多歌曲 -->
							</ul>
							<audio id="audioPlayer" controls></audio>
							<button class="play-button" onclick="playNext()">播放下一首</button>
						</div>
					</span>
				</div>
				<!-- 四级块区 -->
				<div class="forthDiv">
					<div>
						<!-- 垃圾分类发展历史介绍 -->
						<div style="background-color: greenyellow">
							<h2>垃圾分类发展历史</h2>
							<p class="text-hover">
							<h3>垃圾分类发展历史</h3>
							20世纪90年代：垃圾分类的起始阶段 -
							这一时期，中国开始关注垃圾分类，主要侧重于回收有价值的废弃物，如玻璃、塑料制品、电池等，而其他废弃物则直接进入终端处置。1992年，在联合国环境与发展大会上，中国政府首次提出城市生活垃圾应逐步实现分类收集。1996年，《中华人民共和国固体废物污染环境防治法》进一步强调了城市生活垃圾的分类收集和运输。<br>
							2000年至2015年：试点探索阶段 -
							2000年，中国建设部确定了8个城市作为垃圾分类收集的试点城市，正式启动垃圾分类工作。这一阶段，垃圾分类工作在一些城市得到了推广和实施，但整体效果并不理想。许多城市在垃圾分类的“收集”环节上强调较多，而对分类收集的系统性考虑较少，政策的明确性和持续性不强。<br>
							2016年至今：快速发展阶段 -
							这一时期，中国垃圾分类工作开始快速发展。国家和地方逐步采用可操作性强的垃圾分类方法，融合互联网+的宣传方式，实用性的法规章程，以及完善的分类收集-分类运输-分类处理循环链来推进生活垃圾分类。垃圾分类工作甚至逐步向市场化方向发展，形成了一条切实可行、可复制、可推广的高效生活垃圾分类模式。<br>
							此外，根据另一份资料，中国垃圾分类政策制度的历史发展可以划分为五个阶段：<br>
							1957—1991年：基于垃圾回收利用的分类收集启蒙阶段；<br>
							1992—1999年：生活垃圾分类法律法规制定的初期阶段；<br>
							2000—2015年：基于垃圾分类实践的分类标准制定阶段；<br>
							2015—2016年：生活垃圾分类制度筹建阶段；<br>
							2017年至今：生活垃圾分类制度的确立和实施阶段。<br>
							从上海的垃圾分类百年演进路线来看，自1843年开埠以来，上海的生活垃圾管理工作经历了形成、发展、衰退、恢复、振兴的历程。早期的垃圾处理方式主要是填坑，随着城市的发展和人口的增加，垃圾处理的需求和难度也逐渐增加。20世纪初，上海开始采用更为先进的垃圾处理方式，如设置垃圾容器、建立垃圾堆场等。<br>
							</p>
						</div>
					</div>
					<div class="news-block">
						<img src="news-image.jpg" alt="新闻图片" class="news-image">
						<div class="news-text">
							<h2>新闻标题</h2>
							<p>新闻内容...</p>
							<div class="date">2024年1月1日</div>
						</div>
					</div>
				</div>
				<!-- 五级区块 -->
				<div class="fifthDiv">
					<footer>

					</footer>
				</div>
			</div>
		</div>
		<style>
			.music-player {
				width: 400px;
				height: 300px;
			}

			#container {
				width: 1000px;
				height: 300px;
				position: relative;
				left: 400px;
			}

			.forthDiv {
				position: absolute;
				top: 1200px;
			}

			.news-block {
				position: relative;
				top: 50px;
			}

			.logo {
				width: 100px;
				height: 40px;
				position: absolute;
				top: 0px;
				left: 0px;
			}

			.logo>img {
				width: 100px;
				height: 40px;
			}
		</style>
		<script>
			var container = document.getElementById('container');
			// 定义弹幕数据
			var data = [{
					text: '这是第一条弹幕',
					color: 'red'
				},
				{
					text: '这是第二条弹幕',
					color: 'green'
				},
				{
					text: '这是第三条弹幕',
					color: 'blue'
				}
			];
			// 定义弹幕速度
			var speed = 2;
			// 定义弹幕间隔
			var interval = 1000;
			// 定义弹幕位置
			var topArr = [];
			for (var i = 0; i < 10; i++) {
				topArr.push(i * 30);
			}
			// 定义弹幕索引
			var index = 0;
			// 定义弹幕定时器
			var timer = setInterval(function() {
				// 获取弹幕数据
				var bullet = data[index];
				// 创建弹幕元素
				var span = document.createElement('span');
				span.className = 'bullet';
				span.innerText = bullet.text;
				span.style.color = bullet.color;
				// 随机获取弹幕位置
				var top = topArr[Math.floor(Math.random() * topArr.length)];
				span.style.top = top + 'px';
				// 将弹幕元素添加到容器中
				container.appendChild(span);
				// 计算弹幕宽度
				var width = span.offsetWidth;
				// 定义弹幕起始位置
				var left = container.offsetWidth;
				span.style.left = left + 'px';
				// 定义弹幕移动定时器
				var bulletTimer = setInterval(function() {
					// 计算弹幕当前位置
					left -= speed;
					span.style.left = left + 'px';
					// 判断弹幕是否移出容器
					if (left < -width) {
						// 移除弹幕元素
						container.removeChild(span);
						// 清除弹幕移动定时器
						clearInterval(bulletTimer);
					}
				}, 10);
				// 更新弹幕索引
				index++;
				if (index >= data.length) {
					index = 0;
				}
			}, interval);
		</script>
		<script>
			function updateNews(newsData) {
				var newsBlock = document.querySelector('.news-block');
				var newsImage = newsBlock.querySelector('.news-image');
				var newsTitle = newsBlock.querySelector('h2');
				var newsContent = newsBlock.querySelector('p');
				var newsDate = newsBlock.querySelector('.date');

				newsImage.src = newsData.imageSrc;
				newsTitle.textContent = newsData.title;
				newsContent.textContent = newsData.content;
				newsDate.textContent = newsData.date;
			}
			每隔一段时间调用updateNews函数更新新闻
			setInterval(function() {
				fetchNewsFromServer(function(newsData) {
					updateNews(newsData);
				});
			}, 60000); // 每分钟更新一次
		</script>
	</body>
</html>